<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdd0d83f265da615f76ba57 -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE"><meta name="apple-itunes-app" content="app-id=987739104"><meta name="baidu-site-verification" content="qiK2a1kcFc"><meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51"><meta name="sogou_site_verification" content="c49WUDZczQ"><style>body {
        font-size: 16px;
        line-height: 2;
      }
      a, button, input {
        margin: 1rem 1.5rem;
      }
      img {
        width: 0;
        height: 0;
      }
      #juejin {
        overflow-x: hidden;
      }</style><title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title><link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png"><link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json"><link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico"><meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml" type="application/opensearchdescription+xml"><link rel="stylesheet" href="./4-ES6 知识点及常考面试题_files/ionicons.min.css"><link rel="stylesheet" href="./4-ES6 知识点及常考面试题_files/iconfont.css"><link href="./4-ES6 知识点及常考面试题_files/0.20e96f0e16539d696fbd.css" rel="stylesheet"><script async="" src="./4-ES6 知识点及常考面试题_files/hm.js.下载"></script><script async="" src="./4-ES6 知识点及常考面试题_files/analytics.js.下载"></script><script type="text/javascript" async="" src="./4-ES6 知识点及常考面试题_files/vds.js.下载"></script><script charset="utf-8" src="./4-ES6 知识点及常考面试题_files/13.46a6fc9d409a46c2798c.js.下载"></script><meta data-vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM" data-vue-meta="true"><meta data-vmid="description" name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。" data-vue-meta="true"></head><body><div id="juejin" data-v-514f306c=""><div class="global-component-box" data-v-514f306c=""><!----><div data-v-71cabb60="" data-v-514f306c="" class="alert-list alert-list"></div><!----><!----><!----><div class="emoji-barrage" data-v-e5f49d52="" data-v-514f306c=""><!----></div><div class="book-new-user-award-popup" style="display:none;" data-v-71b0e7b2="" data-v-514f306c=""><div class="content-box" style="display:;" data-v-71b0e7b2=""><div class="close ion-close-round" data-v-71b0e7b2=""></div><div class="header" data-v-71b0e7b2=""><div class="icon" data-v-71b0e7b2=""><img src="./4-ES6 知识点及常考面试题_files/icon.a87e5ae.svg" data-v-71b0e7b2=""></div><div class="txt" data-v-71b0e7b2="">新人专享好礼</div></div><div class="desc" data-v-71b0e7b2="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div><div class="tickets" data-v-71b0e7b2=""><div class="ticket" data-v-71b0e7b2=""><div class="ticket__inner" data-v-71b0e7b2=""><div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div><div class="sale" data-v-71b0e7b2="">最高可省 15 元</div></div></div><div class="ticket" data-v-71b0e7b2=""><div class="ticket__inner" data-v-71b0e7b2=""><div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div><div class="sale" data-v-71b0e7b2="">最高可省 15 元</div></div></div><div class="ticket" data-v-71b0e7b2=""><div class="ticket__inner" data-v-71b0e7b2=""><div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div><div class="sale" data-v-71b0e7b2="">最高可省 15 元</div></div></div></div><div class="remark" data-v-71b0e7b2="">注：专享券的使用期限在领券的七天内。</div><div class="submit-btn" data-v-71b0e7b2="">一键领取</div></div><div class="model success" style="display:none;" data-v-71b0e7b2=""><div class="heading" data-v-71b0e7b2="">领取成功</div><div class="content-text" data-v-71b0e7b2="">购买小册时自动使用专享券</div><div class="btn-success-footer" data-v-71b0e7b2=""><div class="btn-ok" data-v-71b0e7b2="">知道了</div><div class="btn-ok btn-link" data-v-71b0e7b2="">前往小册首页</div></div></div><div class="model fail" style="display:none;" data-v-71b0e7b2=""><div class="heading" data-v-71b0e7b2="">领取失败</div><div class="content-text" data-v-71b0e7b2="">本活动仅适用于小册新用户</div><div class="btn-ok" data-v-71b0e7b2="">知道了</div></div></div><!----></div><!----><div data-v-097468bb="" data-v-514f306c="" class="book-read-view"><section data-v-097468bb="" class="book-section"><div data-v-097468bb="" class="book-summary"><div data-v-097468bb="" class="book-summary-masker"></div><div data-v-097468bb="" class="book-summary-inner"><div data-v-097468bb="" class="book-summary__header"><a data-v-097468bb="" href="https://juejin.im/books" target="" rel="" class="logo"><img data-v-097468bb="" src="./4-ES6 知识点及常考面试题_files/logo.a7995ad.svg"></a><div data-v-097468bb="" class="label">小册</div><!----></div><!----><div data-v-d0eb2184="" data-v-097468bb="" class="book-directory book-directory bought"><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">1</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">小册食用指南</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">2</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">3</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section route-active section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">4</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">5</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">6</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">手写 Promise</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">7</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Event Loop</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">8</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">9</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 思考题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">10</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">DevTools Tips</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">11</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">12</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器缓存机制</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">13</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器渲染原理</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">14</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">安全防范知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">15</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">16</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">性能优化琐碎事</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">17</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Webpack 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">18</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">实现小型打包工具</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">19</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">20</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">21</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">22</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">23</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">24</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">监控</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">25</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">UDP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">26</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">TCP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">27</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 及 TLS</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">28</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP/2 及 HTTP/3</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">29</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">30</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">设计模式</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">31</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常见数据结构</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">32</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常考算法题解析</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">33</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">CSS 常考面试题资料</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">34</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">如何写好一封简历</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">35</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">面试常用技巧</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">36</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div><!----><!----></div><!----></a></div><div data-v-097468bb="" class="book-summary__footer"><div data-v-097468bb="" class="qr-icon"><img data-v-097468bb="" src="./4-ES6 知识点及常考面试题_files/qr-icon.881015a.svg"></div><div data-v-097468bb="" class="qr-tips"><span data-v-097468bb="" class="ion-close"></span><div data-v-097468bb="" class="title"><span data-v-097468bb="">关注公众号</span><span data-v-097468bb="">领取优惠码</span></div><div data-v-097468bb="" class="qr-img"><img data-v-097468bb="" src="./4-ES6 知识点及常考面试题_files/wx-qr.13d8b4d.png"></div></div></div></div></div><div data-v-097468bb="" class="book-content"><div data-v-097468bb="" class="book-content-inner"><div data-v-097468bb="" class="book-content__header"><div data-v-097468bb="" class="switch"><img data-v-097468bb="" src="./4-ES6 知识点及常考面试题_files/icon.3e69d5a.svg"></div><div data-v-097468bb="" class="menu"><img data-v-097468bb="" src="./4-ES6 知识点及常考面试题_files/menu.74b9add.svg"></div><div data-v-097468bb="" class="title"><a data-v-097468bb="" href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div><div data-v-629272fe="" data-v-097468bb="" class="user-auth user-auth"><div data-v-629272fe="" class="nav-item menu"><div data-v-3b1ba6d2="" data-v-afcc6e34="" data-v-629272fe="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar loaded" style="background-image: url(&quot;https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg&quot;);"></div><div data-v-629272fe="" class="nav-menu user-dropdown-list" style="display: none;"><ul data-v-629272fe="" class="nav-menu-item-group"><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe="" class="fengwei fw-write"></i><span data-v-629272fe="">写文章</span></a></li><!----><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe="" class="fengwei fw-draft"></i><span data-v-629272fe="">草稿</span></a></li></ul><ul data-v-629272fe="" class="nav-menu-item-group"><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a"><i data-v-629272fe="" class="fengwei fw-person"></i><span data-v-629272fe="">我的主页</span></a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/likes"><i data-v-629272fe="" class="fengwei fw-like"></i><span data-v-629272fe="">我喜欢的</span></a></li><!----><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/collections"><i data-v-629272fe="" class="fengwei fw-collection"></i><span data-v-629272fe="">我的收藏集</span></a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/books?type=bought"><i data-v-629272fe="" class="fengwei fw-bought"></i><span data-v-629272fe="">已购</span></a></li><!----><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/subscribe"><i data-v-629272fe="" class="fengwei fw-tag"></i><span data-v-629272fe="">标签管理</span></a></li></ul><ul data-v-629272fe="" class="nav-menu-item-group"><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/user/settings"><i data-v-629272fe="" class="fengwei fw-setting"></i><span data-v-629272fe="">设置</span></a></li><li data-v-629272fe="" class="nav-menu-item more"><a data-v-629272fe=""><i data-v-629272fe="" class="fengwei fw-info"></i><span data-v-629272fe="">关于</span><i data-v-629272fe="" class="ion-chevron-right more-icon"></i></a><div data-v-629272fe="" class="nav-menu more-dropdown-list"><ul data-v-629272fe="" class="nav-menu-item-group"><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/app" target="_blank">下载应用</a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://juejin.im/about" target="_blank">关于</a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://xitu.io/jobs" target="_blank">加入我们</a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer" target="_blank">翻译计划</a></li><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe="" href="https://bd.juejin.im/?utm_campaign=bd&amp;utm_source=web&amp;utm_medium=nav" target="_blank">合作伙伴</a></li></ul></div></li></ul><ul data-v-629272fe="" class="nav-menu-item-group"><li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe="" class="fengwei fw-logout"></i><span data-v-629272fe="">登出</span></a></li></ul></div></div><!----></div><!----></div><div data-v-097468bb="" class="book-body transition--next"><div data-v-5602b343="" data-v-097468bb="" class="section-view book-section-content"><div data-v-05bbf43a="" data-v-5602b343="" class="section-content"><div data-v-05bbf43a="" class="section-page book-section-view"><div data-v-05bbf43a="" class="entry-content article-content"><h1 class="heading" data-id="heading-0">ES6 知识点及常考面试题</h1>
<p>本章节我们将来学习 ES6 部分的内容。</p>
<h2 class="heading" data-id="heading-1">var、let 及 const 区别</h2>
<blockquote class="warning"><p>涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？
</p></blockquote><p>对于这个问题，我们应该先来了解提升（hoisting）这个概念。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-built_in">console</span>.log(a) <span class="hljs-comment">// undefined</span>
<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>
</code></pre><p>从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。</p>
<p>对于这种情况，我们可以把代码这样来看</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> a
<span class="hljs-built_in">console</span>.log(a) <span class="hljs-comment">// undefined</span>
a = <span class="hljs-number">1</span>
</code></pre><p>接下来我们再来看一个例子</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>
<span class="hljs-keyword">var</span> a
<span class="hljs-built_in">console</span>.log(a)
</code></pre><p>对于这个例子，如果你认为打印的值为 <code>undefined</code> 那么就错了，答案应该是 <code>10</code>，对于这种情况，我们这样来看代码</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> a
<span class="hljs-keyword">var</span> a
a = <span class="hljs-number">10</span>
<span class="hljs-built_in">console</span>.log(a)
</code></pre><p>到这里为止，我们已经了解了 <code>var</code> 声明的变量会发生提升的情况，其实不仅变量会提升函数也会被提升。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-built_in">console</span>.log(a) <span class="hljs-comment">// ƒ a() {}</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>) </span>{}
<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>
</code></pre><p>对于上述代码，打印结果会是 <code>ƒ a() {}</code>，即使变量声明在函数之后，这也说明了函数会被提升，并且优先于变量提升。</p>
<p>说完了这些，想必大家也知道 <code>var</code> 存在的问题了，使用 <code>var</code> 声明的变量会被提升到作用域的顶部，接下来我们再来看 <code>let</code> 和 <code>const</code> 。</p>
<p>我们先来看一个例子：</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>
<span class="hljs-keyword">let</span> b = <span class="hljs-number">1</span>
<span class="hljs-keyword">const</span> c = <span class="hljs-number">1</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">window</span>.b) <span class="hljs-comment">// undefined</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">window</span>. c) <span class="hljs-comment">// undefined</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(a)
  <span class="hljs-keyword">let</span> a
}
test()
</code></pre><p>首先在全局作用域下使用 <code>let</code> 和 <code>const</code> 声明变量，变量并不会被挂载到 <code>window</code> 上，这一点就和 <code>var</code> 声明有了区别。</p>
<p>再者当我们在声明 <code>a</code> 之前如果使用了 <code>a</code>，就会出现报错的情况</p>
<p></p><figure><img class="lazyload inited loaded" data-src="https://user-gold-cdn.xitu.io/2018/11/18/1672730318cfa540?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="447" data-height="49" src="./4-ES6 知识点及常考面试题_files/1672730318cfa540"><figcaption></figcaption></figure><p></p>
<p>你可能会认为这里也出现了提升的情况，但是因为某些原因导致不能访问。</p>
<p>首先报错的原因是因为存在暂时性死区，我们不能在声明前就使用变量，这也是 <code>let</code> 和 <code>const</code> 优于 <code>var</code> 的一点。然后这里你认为的提升和 <code>var</code> 的提升是有区别的，虽然变量在编译的环节中被告知在这块作用域中可以访问，但是访问是受限制的。</p>
<p>那么到这里，想必大家也都明白 <code>var</code>、<code>let</code> 及 <code>const</code> 区别了，不知道你是否会有这么一个疑问，为什么要存在提升这个事情呢，其实提升存在的根本原因就是为了解决函数间互相调用的情况</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test1</span>(<span class="hljs-params"></span>) </span>{
    test2()
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test2</span>(<span class="hljs-params"></span>) </span>{
    test1()
}
test1()
</code></pre><p>假如不存在提升这个情况，那么就实现不了上述的代码，因为不可能存在 <code>test1</code> 在 <code>test2</code> 前面然后 <code>test2</code> 又在 <code>test1</code> 前面。</p>
<p>那么最后我们总结下这小节的内容：</p>
<ul>
<li>函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部</li>
<li><code>var</code> 存在提升，我们能在声明之前使用。<code>let</code>、<code>const</code> 因为暂时性死区的原因，不能在声明前使用</li>
<li><code>var</code> 在全局作用域下声明变量会导致变量挂载在 <code>window</code> 上，其他两者不会</li>
<li><code>let</code> 和 <code>const</code> 作用基本一致，但是后者声明的变量不能再次赋值</li>
</ul>
<h2 class="heading" data-id="heading-2">原型继承和 Class 继承</h2>
<blockquote class="warning"><p>涉及面试题：原型如何实现继承？Class 如何实现继承？Class 本质是什么？
</p></blockquote><p>首先先来讲下 <code>class</code>，其实在 JS 中并不存在类，<code>class</code> 只是语法糖，本质还是函数。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>{}
Person <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Function</span> <span class="hljs-comment">// true</span>
</code></pre><p>在上一章节中我们讲解了原型的知识点，在这一小节中我们将会使用分别使用原型和 <code>class</code> 的方式来实现继承。</p>
<h3 class="heading" data-id="heading-3">组合继承</h3>
<p>组合继承是最常用的继承方式，</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Parent</span>(<span class="hljs-params">value</span>) </span>{
  <span class="hljs-keyword">this</span>.val = value
}
Parent.prototype.getValue = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.val)
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Child</span>(<span class="hljs-params">value</span>) </span>{
  Parent.call(<span class="hljs-keyword">this</span>, value)
}
Child.prototype = <span class="hljs-keyword">new</span> Parent()

<span class="hljs-keyword">const</span> child = <span class="hljs-keyword">new</span> Child(<span class="hljs-number">1</span>)

child.getValue() <span class="hljs-comment">// 1</span>
child <span class="hljs-keyword">instanceof</span> Parent <span class="hljs-comment">// true</span>
</code></pre><p>以上继承的方式核心是在子类的构造函数中通过 <code>Parent.call(this)</code> 继承父类的属性，然后改变子类的原型为 <code>new Parent()</code> 来继承父类的函数。</p>
<p>这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费。</p>
<p></p><figure><img class="lazyload inited loaded" data-src="https://user-gold-cdn.xitu.io/2018/11/19/1672aeb24a2e2cae?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="319" data-height="105" src="./4-ES6 知识点及常考面试题_files/1672aeb24a2e2cae"><figcaption></figcaption></figure><p></p>
<h3 class="heading" data-id="heading-4">寄生组合继承</h3>
<p>这种继承方式对组合继承进行了优化，组合继承缺点在于继承父类函数时调用了构造函数，我们只需要优化掉这点就行了。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Parent</span>(<span class="hljs-params">value</span>) </span>{
  <span class="hljs-keyword">this</span>.val = value
}
Parent.prototype.getValue = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.val)
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Child</span>(<span class="hljs-params">value</span>) </span>{
  Parent.call(<span class="hljs-keyword">this</span>, value)
}
Child.prototype = <span class="hljs-built_in">Object</span>.create(Parent.prototype, {
  <span class="hljs-attr">constructor</span>: {
    <span class="hljs-attr">value</span>: Child,
    <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-attr">writable</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">configurable</span>: <span class="hljs-literal">true</span>
  }
})

<span class="hljs-keyword">const</span> child = <span class="hljs-keyword">new</span> Child(<span class="hljs-number">1</span>)

child.getValue() <span class="hljs-comment">// 1</span>
child <span class="hljs-keyword">instanceof</span> Parent <span class="hljs-comment">// true</span>
</code></pre><p>以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数。</p>
<p></p><figure><img class="lazyload inited loaded" data-src="https://user-gold-cdn.xitu.io/2018/11/19/1672afb8dfa21361?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="358" data-height="101" src="./4-ES6 知识点及常考面试题_files/1672afb8dfa21361"><figcaption></figcaption></figure><p></p>
<h3 class="heading" data-id="heading-5">Class 继承</h3>
<p>以上两种继承方式都是通过原型去解决的，在 ES6 中，我们可以使用 <code>class</code> 去实现继承，并且实现起来很简单</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Parent</span> </span>{
  <span class="hljs-keyword">constructor</span>(value) {
    <span class="hljs-keyword">this</span>.val = value
  }
  getValue() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.val)
  }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Child</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Parent</span> </span>{
  <span class="hljs-keyword">constructor</span>(value) {
    <span class="hljs-keyword">super</span>(value)
    <span class="hljs-keyword">this</span>.val = value
  }
}
<span class="hljs-keyword">let</span> child = <span class="hljs-keyword">new</span> Child(<span class="hljs-number">1</span>)
child.getValue() <span class="hljs-comment">// 1</span>
child <span class="hljs-keyword">instanceof</span> Parent <span class="hljs-comment">// true</span>
</code></pre><p><code>class</code> 实现继承的核心在于使用 <code>extends</code> 表明继承自哪个父类，并且在子类构造函数中必须调用 <code>super</code>，因为这段代码可以看成 <code>Parent.call(this, value)</code>。</p>
<p>当然了，之前也说了在 JS 中并不存在类，<code>class</code> 的本质就是函数。</p>
<h2 class="heading" data-id="heading-6">模块化</h2>
<blockquote class="warning"><p>涉及面试题：为什么要使用模块化？都有哪几种方式可以实现模块化，各有什么特点？
</p></blockquote><p>使用一个技术肯定是有原因的，那么使用模块化可以给我们带来以下好处</p>
<ul>
<li>解决命名冲突</li>
<li>提供复用性</li>
<li>提高代码可维护性</li>
</ul>
<h3 class="heading" data-id="heading-7">立即执行函数</h3>
<p>在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题</p>
<pre><code class="hljs js" lang="js">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">globalVariable</span>)</span>{
   globalVariable.test = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{}
   <span class="hljs-comment">// ... 声明各种变量、函数都不会污染全局作用域</span>
})(globalVariable)
</code></pre><h3 class="heading" data-id="heading-8">AMD 和 CMD</h3>
<p>鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊，只需要了解这两者是如何使用的。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-comment">// AMD</span>
define([<span class="hljs-string">'./a'</span>, <span class="hljs-string">'./b'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">a, b</span>) </span>{
  <span class="hljs-comment">// 加载模块完毕可以使用</span>
  a.do()
  b.do()
})
<span class="hljs-comment">// CMD</span>
define(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">require, exports, module</span>) </span>{
  <span class="hljs-comment">// 加载模块</span>
  <span class="hljs-comment">// 可以把 require 写在函数体的任意地方实现延迟加载</span>
  <span class="hljs-keyword">var</span> a = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./a'</span>)
  a.doSomething()
})
</code></pre><h3 class="heading" data-id="heading-9">CommonJS</h3>
<p>CommonJS 最早是 Node 在使用，目前也仍然广泛使用，比如在 Webpack 中你就能见到它，当然目前在 Node 中的模块管理已经和 CommonJS 有一些区别了。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-comment">// a.js</span>
<span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>
}
<span class="hljs-comment">// or </span>
exports.a = <span class="hljs-number">1</span>

<span class="hljs-comment">// b.js</span>
<span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./a.js'</span>)
<span class="hljs-built_in">module</span>.a <span class="hljs-comment">// -&gt; log 1</span>
</code></pre><p>因为 CommonJS 还是会使用到的，所以这里会对一些疑难点进行解析</p>
<p>先说 <code>require</code> 吧</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./a.js'</span>)
<span class="hljs-built_in">module</span>.a 
<span class="hljs-comment">// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，</span>
<span class="hljs-comment">// 重要的是 module 这里，module 是 Node 独有的一个变量</span>
<span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">a</span>: <span class="hljs-number">1</span>
}
<span class="hljs-comment">// module 基本实现</span>
<span class="hljs-keyword">var</span> <span class="hljs-built_in">module</span> = {
  <span class="hljs-attr">id</span>: <span class="hljs-string">'xxxx'</span>, <span class="hljs-comment">// 我总得知道怎么去找到他吧</span>
  exports: {} <span class="hljs-comment">// exports 就是个空对象</span>
}
<span class="hljs-comment">// 这个是为什么 exports 和 module.exports 用法相似的原因</span>
<span class="hljs-keyword">var</span> exports = <span class="hljs-built_in">module</span>.exports 
<span class="hljs-keyword">var</span> load = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">module</span>) </span>{
    <span class="hljs-comment">// 导出的东西</span>
    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>
    <span class="hljs-built_in">module</span>.exports = a
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">module</span>.exports
};
<span class="hljs-comment">// 然后当我 require 的时候去找到独特的</span>
<span class="hljs-comment">// id，然后将要使用的东西用立即执行函数包装下，over</span>
</code></pre><p>另外虽然 <code>exports</code> 和 <code>module.exports</code> 用法相似，但是不能对 <code>exports</code> 直接赋值。因为 <code>var exports = module.exports</code> 这句代码表明了 <code>exports</code> 和 <code>module.exports</code> 享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对 <code>exports</code> 赋值就会导致两者不再指向同一个内存地址，修改并不会对 <code>module.exports</code> 起效。</p>
<h3 class="heading" data-id="heading-10">ES Module</h3>
<p>ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别</p>
<ul>
<li>CommonJS 支持动态导入，也就是 <code>require(${path}/xx.js)</code>，后者目前不支持，但是已有提案</li>
<li>CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响</li>
<li>CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化</li>
<li>ES Module 会编译成 <code>require/exports</code> 来执行的</li>
</ul>
<pre><code class="hljs js" lang="js"><span class="hljs-comment">// 引入模块 API</span>
<span class="hljs-keyword">import</span> XXX <span class="hljs-keyword">from</span> <span class="hljs-string">'./a.js'</span>
<span class="hljs-keyword">import</span> { XXX } <span class="hljs-keyword">from</span> <span class="hljs-string">'./a.js'</span>
<span class="hljs-comment">// 导出模块 API</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>) </span>{}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{}
</code></pre><h2 class="heading" data-id="heading-11">Proxy</h2>
<blockquote class="warning"><p>涉及面试题：Proxy 可以实现什么功能？
</p></blockquote><p>如果你平时有关注 Vue 的进展的话，可能已经知道了在 Vue3.0 中将会通过 <code>Proxy</code> 来替换原本的 <code>Object.defineProperty</code> 来实现数据响应式。
Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(target, handler)
</code></pre><p><code>target</code> 代表需要添加代理的对象，<code>handler</code> 用来自定义对象中的操作，比如可以用来自定义 <code>set</code> 或者 <code>get</code> 函数。</p>
<p>接下来我们通过 <code>Proxy</code> 来实现一个数据响应式</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> onWatch = <span class="hljs-function">(<span class="hljs-params">obj, setBind, getLogger</span>) =&gt;</span> {
  <span class="hljs-keyword">let</span> handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Reflect</span>.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      <span class="hljs-keyword">return</span> <span class="hljs-built_in">Reflect</span>.set(target, property, value)
    }
  }
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(obj, handler)
}

<span class="hljs-keyword">let</span> obj = { <span class="hljs-attr">a</span>: <span class="hljs-number">1</span> }
<span class="hljs-keyword">let</span> p = onWatch(
  obj,
  (v, property) =&gt; {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`监听到属性<span class="hljs-subst">${property}</span>改变为<span class="hljs-subst">${v}</span>`</span>)
  },
  (target, property) =&gt; {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`'<span class="hljs-subst">${property}</span>' = <span class="hljs-subst">${target[property]}</span>`</span>)
  }
)
p.a = <span class="hljs-number">2</span> <span class="hljs-comment">// 监听到属性a改变</span>
p.a <span class="hljs-comment">// 'a' = 2</span>
</code></pre><p>在上述代码中，我们通过自定义 <code>set</code> 和 <code>get</code> 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。</p>
<p>当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要我们在 <code>get</code> 中收集依赖，在 <code>set</code> 派发更新，之所以 Vue3.0 要使用 <code>Proxy</code> 替换原本的 API 原因在于 <code>Proxy</code> 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 <code>Proxy</code> 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。</p>
<h2 class="heading" data-id="heading-12">map, filter, reduce</h2>
<blockquote class="warning"><p>涉及面试题：map, filter, reduce 各自有什么作用？
</p></blockquote><p><code>map</code> 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。</p>
<pre><code class="hljs js" lang="js">[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].map(<span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v + <span class="hljs-number">1</span>) <span class="hljs-comment">// -&gt; [2, 3, 4]</span>
</code></pre><p>另外 <code>map</code> 的回调函数接受三个参数，分别是当前索引元素，索引，原数组</p>
<pre><code class="hljs js" lang="js">[<span class="hljs-string">'1'</span>,<span class="hljs-string">'2'</span>,<span class="hljs-string">'3'</span>].map(<span class="hljs-built_in">parseInt</span>)
</code></pre><ul>
<li>第一轮遍历 <code>parseInt('1', 0) -&gt; 1</code></li>
<li>第二轮遍历 <code>parseInt('2', 1) -&gt; NaN</code></li>
<li>第三轮遍历 <code>parseInt('3', 2) -&gt; NaN</code></li>
</ul>
<p><code>filter</code> 的作用也是生成一个新数组，在遍历数组的时候将返回值为 <code>true</code> 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> array = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>, <span class="hljs-number">6</span>]
<span class="hljs-keyword">let</span> newArray = array.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item !== <span class="hljs-number">6</span>)
<span class="hljs-built_in">console</span>.log(newArray) <span class="hljs-comment">// [1, 2, 4]</span>
</code></pre><p>和 <code>map</code> 一样，<code>filter</code> 的回调函数也接受三个参数，用处也相同。</p>
<p>最后我们来讲解 <code>reduce</code> 这块的内容，同时也是最难理解的一块内容。<code>reduce</code> 可以将数组中的元素通过回调函数最终转换为一个值。</p>
<p>如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]
<span class="hljs-keyword">let</span> total = <span class="hljs-number">0</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; arr.length; i++) {
  total += arr[i]
}
<span class="hljs-built_in">console</span>.log(total) <span class="hljs-comment">//6 </span>
</code></pre><p>但是如果我们使用 <code>reduce</code> 的话就可以将遍历部分的代码优化为一行代码</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]
<span class="hljs-keyword">const</span> sum = arr.reduce(<span class="hljs-function">(<span class="hljs-params">acc, current</span>) =&gt;</span> acc + current, <span class="hljs-number">0</span>)
<span class="hljs-built_in">console</span>.log(sum)
</code></pre><p>对于 <code>reduce</code> 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 <code>reduce</code> 的过程</p>
<ul>
<li>首先初始值为 <code>0</code>，该值会在执行第一次回调函数时作为第一个参数传入</li>
<li>回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数</li>
<li>在一次执行回调函数时，当前值和初始值相加得出结果 <code>1</code>，该结果会在第二次执行回调函数时当做第一个参数传入</li>
<li>所以在第二次执行回调函数时，相加的值就分别是 <code>1</code> 和 <code>2</code>，以此类推，循环结束后得到结果 <code>6</code></li>
</ul>
<p>想必通过以上的解析大家应该明白 <code>reduce</code> 是如何通过回调函数将所有元素最终转换为一个值的，当然 <code>reduce</code> 还可以实现很多功能，接下来我们就通过 <code>reduce</code> 来实现 <code>map</code> 函数</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]
<span class="hljs-keyword">const</span> mapArray = arr.map(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> value * <span class="hljs-number">2</span>)
<span class="hljs-keyword">const</span> reduceArray = arr.reduce(<span class="hljs-function">(<span class="hljs-params">acc, current</span>) =&gt;</span> {
  acc.push(current * <span class="hljs-number">2</span>)
  <span class="hljs-keyword">return</span> acc
}, [])
<span class="hljs-built_in">console</span>.log(mapArray, reduceArray) <span class="hljs-comment">// [2, 4, 6]</span>
</code></pre><p>如果你对这个实现还有困惑的话，可以根据上一步的解析步骤来分析过程。</p>
<h2 class="heading" data-id="heading-13">小结</h2>
<p>这一章节我们了解了部分 ES6 常考的知识点，其他的一些异步内容我们会放在下一章节去讲。如果大家对于这个章节的内容存在疑问，欢迎在评论区与我互动。</p>
</div><section data-v-05bbf43a="" class="book-comments"><div data-v-05bbf43a="" class="box-title">留言</div><div data-v-05bbf43a="" class="comment-box"><div data-v-81313b1e="" data-v-05bbf43a="" class="comment-form comment-form" id="comment"><div data-v-3b1ba6d2="" data-v-afcc6e34="" data-v-81313b1e="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar loaded" style="background-image: url(&quot;https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg&quot;);"></div><textarea data-v-81313b1e="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input" style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea><div data-v-81313b1e="" class="action-box" style="display: none;"><div data-v-680eb36d="" data-v-81313b1e="" class="image-uploader image-uploader" style="display: none;"><input data-v-680eb36d="" type="file" class="input"><button data-v-680eb36d="" class="upload-btn"><i data-v-680eb36d="" class="icon ion-image"></i><span data-v-680eb36d="">上传图片</span></button></div><div data-v-81313b1e="" class="submit-box"><span data-v-81313b1e="" class="submit-text">Ctrl or ⌘ + Enter</span><button data-v-81313b1e="" class="submit-btn">评论</button></div></div><!----></div></div><ul data-v-32e5a55b="" data-v-05bbf43a="" st:block="commentList" class="comment-list comment-list"><!----></ul></section></div></div><!----><!----></div></div><div data-v-a9263a68="" data-v-097468bb="" class="book-handle book-direction"><div data-v-a9263a68="" class="step-btn step-btn--prev"><img data-v-a9263a68="" src="./4-ES6 知识点及常考面试题_files/prev.87ad47e.svg"></div><div data-v-a9263a68="" class="step-btn step-btn--next"><img data-v-a9263a68="" src="./4-ES6 知识点及常考面试题_files/next.54d8a35.svg"></div><!----><!----></div><!----></div></div></section><!----><!----><!----><div data-v-1b0b9cb8="" data-v-097468bb="" class="image-viewer-box"><!----></div></div><!----></div>
      
      
      <script type="text/javascript" src="./4-ES6 知识点及常考面试题_files/runtime.5902a8b1cc2b7567f479.js.下载"></script><script type="text/javascript" src="./4-ES6 知识点及常考面试题_files/0.e205fcdd4d4b6767f462.js.下载"></script><script type="text/javascript" src="./4-ES6 知识点及常考面试题_files/1.cbb1f8f5dcdee0086c6a.js.下载"></script>
    </body></html>